<template>
  <div>
    <el-row>
      <el-col :span="5" style="margin: 20px; margin-left: 50px">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="12">
              <el-image
                style="width: 80px; height: 80px"
                src="https://s2.loli.net/2021/12/20/GMA7e9hnZxq8Vud.png"
                fit="fit"
              ></el-image
            ></el-col>
            <el-col :span="12">
              <b> 面试通知 </b>
              <h2>0</h2>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5" style="margin: 20px">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="12">
              <el-image
                style="width: 80px; height: 80px"
                src="https://s2.loli.net/2021/12/20/Rh8mPoUK5nJX6zT.png"
                fit="fit"
              ></el-image
            ></el-col>
            <el-col :span="12">
              <b> 申请记录 </b>
              <h2>0</h2>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5" style="margin: 20px">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="12">
              <el-image
                style="width: 80px; height: 80px"
                src="https://s2.loli.net/2021/12/20/ECTdcUPilAFN37h.png"
                fit="fit"
              ></el-image
            ></el-col>
            <el-col :span="12">
              <b> 收藏记录 </b>
              <h2>0</h2>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5" style="margin: 20px">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="12">
              <el-image
                style="width: 80px; height: 80px"
                src="https://s2.loli.net/2021/12/20/j2teRvAC6hpoUPl.png"
                fit="fit"
              ></el-image
            ></el-col>
            <el-col :span="12">
              <b> 我的关注 </b>
              <h2>0</h2>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin: 10px; margin-left: 50px; width: 92%">
      <b>我的简历</b>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="2">
          <el-avatar
            :size="80"
            :fit="fit"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          ></el-avatar>
        </el-col>
        <el-col :span="10">
          <div>
            <span style="font-size: 20px">王多鱼</span>
            <el-divider direction="vertical"></el-divider>
            <span>前端开发</span>
          </div>
          <div style="margin-top: 5px">
            <span>22岁</span>
            <el-divider direction="vertical"></el-divider>
            <span>应届生</span>
            <el-divider direction="vertical"></el-divider>
            <span>本科</span>
          </div>
          <div style="margin-top: 5px">
            <span>厦门</span>
            <el-divider direction="vertical"></el-divider>
            <span>联系电话：18888888888</span>
          </div>
        </el-col>
        <el-col :span="5" style="margin-right: 35px">
          <span style="font-size: 13px">更新时间：2021年12月20日</span>
          <el-row style="margin-top: 10px">
            <el-col :span="8" style="font-size: 12px"
              ><span> 简历完整度： </span></el-col
            >
            <el-col :span="16"
              ><el-progress :percentage="50"> </el-progress>
            </el-col>
          </el-row>
          <span style="font-size: 13px; margin-top: 10px">被浏览：5</span>
        </el-col>
        <el-col :span="6">
          <div>
            <el-button icon="el-icon-edit" round @click="toResumEdit"
              >修改简历</el-button
            >
            <el-button icon="el-icon-upload2" round>置顶简历</el-button>
          </div>
          <div style="margin-top: 10px">
            <el-button icon="el-icon-view" round @click="toResumDetails">预览简历</el-button>
            <el-button icon="el-icon-refresh" round>刷新简历</el-button>
          </div>
        </el-col>
      </el-row>
      <el-card
        style="
          margin-top: 20px;
          margin-bottom: 10px;
          background-color: rgba(214, 245, 241, 0.973);
        "
      >
        <el-row>
          <el-col :span="3">
            <el-image
              src="https://s2.loli.net/2021/12/20/sX4PFwi1quD6BTb.png"
              style="width: 60px; height: 60px; margin-left: 20px"
            >
            </el-image>
          </el-col>
          <el-col :span="18">
            <b>你的简历还没有完善，快去完善吧。</b>
            <p style="color: gray">
              完善简历，如工作经历，可以有效提高求职成功率哦！
            </p>
          </el-col>
          <el-col :span="3" style="margin-top: 15px">
            <el-button type="primary" round @click="toResumEdit">完善简历</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
    <el-card style="margin: 10px; margin-left: 50px; width: 92%">
      <el-divider>
        <h3>最新职位</h3>
      </el-divider>
      <el-row v-for="o in 4" :key="o">
        <el-col
          :span="6"
          v-for="o in 4"
          :key="o"
          style="margin: 10px; width: 23%"
        >
          <el-card shadow="hover">
            <div class="trip">
              <el-link type="primary" @click="toRecruitmentDetails">招聘职位</el-link>
            </div>
            <div class="trip">
              <el-link  target="_blank" @click="toEnterpriseDetails">
                公司名称
              </el-link>
            </div>
            <div class="trip" style="color: red">3000-5000</div>
            <div class="trip">
              地区
              <el-divider direction="vertical"></el-divider>
              学历要求
              <el-divider direction="vertical"></el-divider>
              工作经验
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  methods: {
    toResumEdit(){
      this.$router.push('/resume/resumeEdit');
    },
    toResumDetails(){
      this.$router.push('/resume/resumeDetails')
    },
    toRecruitmentDetails(){
      this.$router.push('/recruitment/recruitmentDetails')
    },
    toEnterpriseDetails(){
      this.$router.push('/enterprise/index')
    }
  },
};
</script>

<style scoped>
.trip {
  margin-bottom: 5px;
}
</style>
